<template>
  <div class="component-style">
    <Codemirror
        :options="readOptions"
        :value="readValue"
        ref="readCodemirror"
    ></Codemirror>
    <el-button type="primary" @click="showStyleChange">修改样式</el-button>
    <el-dialog
        :close-on-click-modal=false
        :close-on-press-escape=false
        v-model="changeStyleVisible"
        title="修改样式">
      <Codemirror
          :options="editOptions"
          :value="changeValue"
          @input="(value)=>{this.changeValue=value}"
          @keyup="changeKeyPress"
          ref="changeCodemirror"
      ></Codemirror>
      <el-row class="button-group">
        <el-button type="primary" @click="submitChange">确定</el-button>
        <el-button type="primary" @click="cancelChange">取消</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script scoped>
import Codemirror from "codemirror-editor-vue3";
// language
import "../../common/codeMirrorSetting"
import commonTool from "@/common/commonTool";

export default {
  name: "component-style",
  props: {
    modelValue: {type: String, required: true}
  },
  components: {Codemirror},
  data() {
    return {
      readValue: "",
      changeValue: "",
      readOptions: {
        mode: "text/css", // 语言模式
        theme: "idea", // 主题
        lineNumbers: true, // 显示行号
        smartIndent: true, // 智能缩进
        indentUnit: 0, // 智能缩进单位为4个空格长度
        foldGutter: true, // 启用行槽中的代码折叠
        styleActiveLine: true, // 显示选中行的样式
        autofocus: true,
        indentWithTabs: true,
        readOnly: "nocursor"
      },
      editOptions: {
        mode: "text/css", // 语言模式
        theme: "idea", // 主题
        lineNumbers: false, // 显示行号
        smartIndent: true, // 智能缩进
        indentUnit: 4, // 智能缩进单位为4个空格长度
        foldGutter: true, // 启用行槽中的代码折叠
        styleActiveLine: true, // 显示选中行的样式
        autofocus: true,
        indentWithTabs: true,
        matchBrackets: true,
        hintOptions: { // 自定义提示选项
          completeSingle: false, // 当匹配只有一项的时候是否自动补全
        }
      },
      changeStyleVisible: false,
    }
  },
  methods: {
    changeKeyPress(codemirror, key) {
      if (!commonTool.isEmpty(key)
          && key.keyCode > 48
          && key.keyCode < 112) {
        codemirror.showHint();
      }
    },
    showStyleChange() {
      this.changeStyleVisible = true;
      this.changeValue = this.readValue
    },
    submitChange() {
      this.readValue = this.changeValue;
      this.$attrs["onUpdate:modelValue"](this.changeValue)
      this.changeStyleVisible = false;
    },
    cancelChange() {
      this.changeValue = this.readValue
      this.changeStyleVisible = false;
    },
  },
  mounted() {
  },
  created() {
    this.readValue = this.modelValue;
  }
}
</script>

<style lang="less" scoped>
.component-style {


  .button-group {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: stretch;
    justify-content: center;
    align-items: center;
    margin-top: 10px;

    .el-button {
      margin-left: 10px;
    }
  }
}
</style>
